
<!-- This uses lightbox 2.04 -->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <title>Picture List</title>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/prototype.js"></script>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/scriptaculous.js?load=effects,builder"></script>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/lightbox.js"></script>
        <script type="text/javascript" src="${createLinkTo(dir:'js/picture',file:'pictureHelper.js')}"></script> 
        <script type="text/javascript" src="${createLinkTo(dir:'js/picture',file:'picture-list.js')}"></script> 
        <link rel="stylesheet" href="${createLinkTo(dir:'css')}/lightbox.css" type="text/css" media="screen" />
    </head>

    <body>
    
    	<g:set var="div_id_for_shoppingcart" value="${'shoppingCartContent'}" />

        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLinkTo(dir:'')}">Home</a></span>
            <span class="menuButton"><img src="${createLinkTo(dir:'images')}/picture/add.gif" title="New Picture" onmouseover="this.style.cursor='pointer';" onclick="javascript:pictureForms.createForm();"/></span>
        </div>

        <div class="leftBox">
            <h1>Picture List</h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="list">
                <table>
                    <tbody>
                    <g:set var="colCounter" value="${0}" />
                    <g:set var="maxCol" value="${4}" />
                    <g:each in="${pictureInstanceList}" status="i" var="pictureInstance">
                        <g:if test="${colCounter == 0}">
                            <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        </g:if>
                               <td width=160>
                               <a href="${fieldValue(bean:pictureInstance, field:'imagePath')}" rel="lightbox" title="${fieldValue(bean:pictureInstance, field:'name')}"><img class="Picture" src="${fieldValue(bean:pictureInstance, field:'thumbnailPath')}" /></a><g:remoteLink controller="shoppingCart" action="add" params="${[itemID:pictureInstance.id]}" update="shoppingCartContent"><img src="${createLinkTo(dir:'images')}/shoppingcart/shoppingcart_add.png" alt="Add item to shopping cart" title="Add '${pictureInstance.name}' to shopping cart"/></g:remoteLink><br />
                               ${fieldValue(bean:pictureInstance, field:'name')}<br />
                               
                               </td>
                               <g:set var="colCounter" value="${colCounter + 1}" />
                        <g:if test="${colCounter == maxCol}">
                            </tr>
                            <g:set var="colCounter" value="${0}" />
                        </g:if>
                    </g:each>
                    </tbody>
                </table>
            </div>
            <div class="paginateButtons">
                <g:paginate total="${Picture.count()}" />
            </div>
        </div>

        <div class="smallBox">
        	<h1>Shopping Cart</h1>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                           <th>Items</th>
                        </tr>
                    </thead>
                        <tr>
                           <td>
                              <div id="shoppingCartContent" class="shoppingCartContent">
                                 Login: ${session.login}<br />Session ID: ${session.getId()}
                              </div>
                           </td>
                        </tr>
                </table>
            </div>
			<div class="nav">
				<span class="menuButton"><g:remoteLink controller="shoppingCart" action="view" update="${div_id_for_shoppingcart}" title="Update/Current Shopping Cart"><img src="${createLinkTo(dir:'images')}/shoppingcart/shoppingcart_update.png"/></g:remoteLink></span>
				<span class="menuButton"><g:remoteLink controller="shoppingCart" action="checkOut" update="${div_id_for_shoppingcart}" title="Check out"><img src="${createLinkTo(dir:'images')}/shoppingcart/shoppingcart_checkout.png"/></g:remoteLink></span>
				<span class="menuButton"><g:remoteLink controller="shoppingCart" action="clear" update="${div_id_for_shoppingcart}" title="Clear Shopping Cart"><img src="${createLinkTo(dir:'images')}/shoppingcart/shoppingcart_delete2.png"/></g:remoteLink></span>
				<span class="menuButton"><g:remoteLink controller="shoppingCart" action="login" update="${div_id_for_shoppingcart}" title="Click to login"><img src="${createLinkTo(dir:'images')}/shoppingcart/key1.png"/></g:remoteLink></span>
			</div>
			<div class="nav">
				<g:remoteLink controller="shoppingCart" action="logout" update="${div_id_for_shoppingcart}" title="Click to logout">Logout</g:remoteLink>
			</div>
        </div>

    </body>
</html>
